<template>
    <div class="app-container">
        <QueryForm v-model="queryForm" :form-items="formItems" @query="handleQuery" @reset="handleReset('form')" />
        <div class="base-table">
            <div class="action">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="Plus" @click="handleAdd('add')">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </div>
            <el-table v-if="refreshTable" :default-expand-all="isExpandAll" header-row-class-name="headerRow"
                :data="deptList" row-key="_id" :tree-props="{ children: 'children' }">
                <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
                    :width="item.width" :formatter="item.formatter">
                    <template #default="scope" v-if="item.prop == 'icon'">
                        <i :class="'iconfont icon-' + scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template #default="scope">
                        <div class="operate">
                            <div class="operate-btn" @click="handleAdd('add', scope.row)">
                                <el-icon :size="12" color="#409efc">
                                    <FolderAdd />
                                </el-icon>
                                新增
                            </div>
                            <div class="operate-btn" @click="handleAdd('edit', scope.row)" size="mini">
                                <el-icon :size="12" color="#409efc">
                                    <Edit />
                                </el-icon>
                                编辑
                            </div>
                            <div class="operate-btn" @click="handleDel(scope.row._id)">
                                <el-icon :size="12" color="#409efc">
                                    <Delete />
                                </el-icon>
                                删除
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <deptAdd v-if="showModal" :Options="deptList" :action="action" :Item="Item" @close="handleClose"></deptAdd>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import utils from "@/utils/utils"
import QueryForm from "@/components/QueryForm/index.vue"
import { ElMessage } from 'element-plus'
import deptAdd from './component/deptAdd.vue'
const action = ref('add')
const Item = ref({})
const { proxy } = getCurrentInstance();
const $Tajax = proxy.$Tajax;
// 查询表单配置
const formItems = [
    {
        type: 'input',
        label: '部门名称',
        prop: 'deptName',
        placeholder: '请输入部门名称'
    },
]
const refreshTable = ref(true);
const isExpandAll = ref(true);
// 表格列配置
const columns = [
    {
        label: "部门名称",
        prop: "deptName",
    },
    {
        label: "负责人",
        prop: "userName",
    },
    {
        label: "更新时间",
        prop: "updateTime",
    },
    {
        label: "创建时间",
        prop: "createTime",
    },
]
// 响应式状态
const queryForm = reactive({
    deptName: "",
})
const deptList = ref([])
const showModal = ref(false)
const dialogForm = ref(null)

// 方法定义
const handleQuery = () => {
    console.log(queryForm)
    getdeptList()
}

// 菜单列表初始化
const getdeptList = async () => {
    try {
        const list = await $Tajax.getDeptList(queryForm)
        deptList.value = list
    } catch (e) {
        throw new Error(e)
    }
}

// 表单重置
const handleReset = (form) => {
    dialogForm.value.resetFields()
    this.getdeptList()
}

// 新增\编辑菜单
const handleAdd = (type, row) => {
    action.value = type
    Item.value = row
    setTimeout(() => {
        showModal.value = true
    }, 100)
}


// 删除菜单
const handleDel = async (_id) => {
    await $Tajax.deptOperate({ _id, action: "delete" })
    ElMessage.success("删除成功")
    getdeptList()
}


// 弹框关闭
const handleClose = (e) => {
    showModal.value = false
    if (e) {
        getdeptList()
    }
}

/** 展开/折叠操作 */
function toggleExpandAll() {
    refreshTable.value = false;
    isExpandAll.value = !isExpandAll.value;
    nextTick(() => {
        refreshTable.value = true;
    }, 100);
}

// 生命周期钩子
onMounted(() => {
    getdeptList()
})
</script>
<style lang="scss">
.headerRow {
    height: 45px;
    background: #f8f8f9;
    border: #f1f1f1;
}
</style>